{% extends "layout.html" %}

{% block main %}
<div class="d-flex flex-wrap mt-3 text-nowrap">
    <span>当前位置：</span>
    <nav>
        {{breadcrumb}}
    </nav>
</div>
<div class="m-2">
    <h1 class="fs-4 fw-bold">{{data.title}}</h1>
    <div class="text-secondary fs-8 my-3">
        <span>{{data.created_at}}</span>
        <span class="ms-2">分类：</span>
        <span class="category-info">
            {% for item in data.categoryLinks %}
            <a class="link-secondary" href="{{item.url}}" target="_blank">{{item.text}}</a>
            {% endfor %}
        </span>
    </div>
    <div id="params"></div>
    <div class="content">{{data.htmlContent}}</div>
    <div class="text-secondary fs-8">
        <span>标签：</span>
        <span class="tag-info">
            {% for item in data.tagLinks %}
            <a class="link-secondary me-2" href="{{item.url}}" target="_blank">{{item.text}}</a>
            {% endfor %}
        </span>
    </div>
    <input type="hidden" id="paramfile" value="{{data.paramfile}}" />
</div>

<script>
    let paramfile = document.getElementById('paramfile').value.trim();
    if (paramfile) {
        // /static/images/软件/2019010301/param.json
        axios.get('..' + paramfile).then(res => {
            let html = '';
            for (let title in res.data) {
                html += `<strong>${title}</strong>`;
                html += buildParamTable(res.data[title]);
            }
            document.getElementById('params').innerHTML = html;

        });
    }

    function buildParamTable(data) {
        let html = '<table class="table table-bordered table-sm"><tbody><tr>';
        let i = 0, n = Object.values(data).length, isOdd = false;
        if (n % 2 > 0) {
            isOdd = true;
            n--;
        }
        for (let k in data) {
            if (i == n) {
                break;
            }
            if (i > 0 && (i % 2 == 0)) {
                html += '</tr><tr>';
            }
            html += `<td class="fs-8" style="width:6em">${k}</td><td class="fs-8" style="width:8em">${data[k]}</td>`;
            i++;
        }
        html += '</tr>';
        if (isOdd) {
            const [key, value] = Object.entries(data).pop();
            html += `<tr><td class="fs-8" >${key}</td><td colspan="3" class="fs-8" >${value}</td></tr>`;
        }
        html += '</tbody></table>';
        return html;
    }
</script>
{% endblock %}